<template>
    <div>
        <div class="ui-title">
          <!--  <div class="ui-title-back"></div>-->
            <div class="ui-title-text">周易书籍</div>
            <!--<div class="ui-title-btn-block">
                <span class="ui-title-btn icon xzr xzr-ico-liebiao " onclick="location.reload();"></span>
            </div>-->
        </div>
        <div class="body">
            <!--  <div class="index-header">
                  &lt;!&ndash;<div class="icon-gua index-header-icon">&#xe64a;&#xe64b;</div>&ndash;&gt;
                  <div class="index-header-text">先天八卦的数和位是根据河图演变而来主空间，时间！所以取其数，后天八卦</div>
              </div>-->
            <div class="index-boot">
                <!--<div class="index-boot-block" @click="gotoPage('eBasics',{classify:2,title:'梅花入门'})"><span class="index-boot-span icon">&#xe655;</span>梅花入门</div>-->
                <div class="index-boot-block" @click="gotoPage('book')"><span class="index-boot-span icon xzr  xzr-ico-icon-test1"></span>易学书籍</div>
                <!--<div class="index-boot-block" @click="gotoPage('eBasics')"><span class="index-boot-span icon xzr xzr-ico-icon-test"></span>易学文章</div>-->
                <!--<div class="index-boot-block" @click="gotoPage('book',{oldbook:1})"><span class="index-boot-span icon">&#xe654;</span>易学古籍</div>-->
                <div class="index-boot-block" @click="gotoPage('paipan')"><span class="index-boot-span icon xzr xzr-ico-noun__cc"></span>八卦排盘</div>
                <!--<div class="index-boot-block" @click="gotoPage('paipan')"><span class="index-boot-span icon">&#xe610;</span>梅花卦例</div>-->
                <div class="index-boot-block" @click="gotoPage('about')"><span class="index-boot-span icon xzr xzr-ico-iconset0142" ></span>关于我们</div>
            </div>
            <!--  <div class="index-title">今日卦例</div>
               <div @click=""  class="index-guali">17号后一直联系不上，今天中午回复短信，仅一个字后，继续手机关机，很是疑惑,不能明白他关机失踪的原因。</div>
            <div class="index-title">基础概念</div>
            <div class="index-base">
                <div class="index-base-item">太极</div>
                <div class="index-base-item">阴阳</div>
                <div class="index-base-item">四象</div>
                <div class="index-base-item">五行</div>
                <div class="index-base-item">先天八卦</div>
                <div class="index-base-item">后天八卦</div>
                <div class="index-base-item">六十四卦</div>
                <div class="index-base-item">天干地支</div>
            </div>-->

            <div class="index-title">最新收集</div>
            <div class="index-book">
                <div class="pub-empty"  v-if="booklist.length<1">正在加载...</div>
                <div class="book-cover index-book-block" v-for="(v,k) in booklist" @click="bookdetail({info:v})" v-if="k<3">
                    <div class="book-cover-title">{{v.title}}</div>
                    <div class="book-cover-hr"></div>
                </div>
                <!--<img :src="v.img" class="index-book-img" v-for="v in booklist" @click="bookdetail({title:v.title,path:v.path,id:v.id})" v-if="v.istop"/>-->
            </div>

           <div class="index-title">最近阅读</div>
            <div class="index-book">
                <div class="pub-empty"  v-if="history.length<1"> <span class="icon xzr xzr-ico-ku"></span>您还没有阅读任何书籍</div>
                <template v-for="(v,k) in history" v-if="k<9 && booklist[v-1]">
                    <template v-for="v2 in booklist" v-if="v2.id==v">
                        <div class="book-cover index-book-block"@click="bookdetail({info:v2})" >
                                <div class="book-cover-title">{{v2.title}}</div>
                                <div class="book-cover-hr"></div>
                        </div>
                    </template>
                </template>

            </div>


            <!--
           <div class="index-title">易学文章</div>
                    <div v-if="articlelist.length<1" style="text-align: center;color:#444; padding-bottom: 3vw;">正在加载...</div>
                    <template v-for=" v in articlelist">
                        <div @click="articledetail({title:v.title,url:v.content})" v-if="v.istop" class="ui-textlist index-article" >
                            <div class="ui-textlist-title">{{v.title}}</div>
                            <div class="ui-textlist-title2">{{v.title2.substr(0,40)+"..."}}</div>
                        </div>
                    </template>
            -->
            <!--<div class="ui-pictextlist2" @click="gotoPage('articleContent',{id:12})">
                <div class="ui-pictextlist-img" style="background-image: url(http://inews.gtimg.com/newsapp_ls/0/3084569212_150120/0)"></div>
                <div class="ui-pictextlist-right">
                    <div class="ui-pictextlist-title">美联储公布利率决定美联储公布利率决定美联储公布利率决定 宣布加息25个基点</div>
                    <div class="ui-pictextlist-title2">腾讯证券讯 北京时间3月22日凌晨2点，美联储公布利率决定，宣布加息25个基点，将联邦基金利率推升到1.50%至1.75%的区间，符合市场普遍预期。这是美联储今年以来的首次加息。</div>
                   &lt;!&ndash; <div class="ui-pictextlist-field">
                        <span class="ui-pictextlist-time">2015-12-10 15:30</span>
                        <span class="ui-pictextlist-num">857321</span>
                    </div>&ndash;&gt;
                </div>
            </div>-->
            <!--  <ul class="ui-bottom">
                <li class="ui-bottom-li">
                    <div class="ui-bottom-text" @click="gotoPage('eBasics')" ref="index">易学入门</div>
                </li>
                <li class="ui-bottom-li">
                    <div class="ui-bottom-text" @click="gotoPage('book')">易学书籍</div>
                </li>
                <li class="ui-bottom-li">
                    <div class="ui-bottom-text" @click="gotoPage('paipan')">梅花排盘</div>
                </li>
            </ul>-->


        </div>
    </div>

</template>

<script>
    export default {
        data: function () {
            return {
                booklist:[],
                articlelist:[],
                history:[]
            }
        },
        methods: {
            gotoPage:function(page,hash){
                if(!hash)hash={};
                if(page=="book"){
                    hash.booklist=this.booklist;
                }
                window.openWebview({
                    page:page,
                    hash:hash
                });
            },
            bookdetail:function (data) {
                var options={};
                options.page='bookinfo';
                options.hash=data;
                window.openWebview(options);
            },
            articledetail:function(data){
                var options={};
                options.page='articleContent';
                options.hash=data;
                //plus.storage.setItem('currentArticle',JSON.stringify(data));
                window.openWebview(options);
            },
            //写缓存书籍列表
            catchBookList:function(dataStr){
                plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){
                    fs.root.getFile('booklist.js',{create:true}, function(fileEntry){
                        fileEntry.createWriter(function(fileWrite){
                            fileWrite.onerror=function(){
                                plus.nativeUI.toast('书籍列表写入失败');
                            }
                            fileWrite.write('window.booklist='+dataStr);
                        });
                    });
                });
            }
        },
        mounted: function () {
            var self=this;
            var netstate=plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE?false:true;
            var looked=plus.storage.getItem('looked');
            if(netstate) {
                var xhr = new plus.net.XMLHttpRequest();
                xhr.open('get', 'http://wap.cne5000.top/data/book.js');
                xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                xhr.onload = function (res) {
                    try {
                        var dataStr = res.target.responseText;
                        var data = JSON.parse(dataStr);
                        self.booklist = data.list.reverse();
                        if (netstate) self.catchBookList(dataStr);//有网络时再缓存
                    } catch (e) {
                        plus.nativeUI.toast("书籍列表数据出错：" + e.message);
                    }
                }
                xhr.send();
            }else{
                var script=document.createElement('script');
                script.src=plus.io.convertLocalFileSystemURL('_doc')+'booklist.js';
                script.onload=function(){
                    self.booklist=window.booklist.list.reverse();
                    plus.nativeUI.toast("网络未连接，无法获取最新书藉列表,已下载的书籍可正常阅读");
                }
                script.onerror=function(){
                    plus.nativeUI.toast("网络未连接，首次使用须连接网络缓存书藉列表");
                }
                document.body.appendChild(script);
            }
            this.history=JSON.parse(looked?looked:"[]");

            //文章列表
            /*var xhr2=new plus.net.XMLHttpRequest();
            xhr2.open('get','http://snature.gz01.bdysite.com/data/article.js');
            xhr2.onload=function(res){
                try{
                    //var data = JSON.parse(res.target.responseText);
                    //self.articlelist = data.list;
                    plus.storage.setItem('articleList',res.target.responseText);
                }catch (e){
                    window.alert(e.message)
                }
            }
            xhr2.send();
            if(!plus.storage.getItem('looked')){
                plus.storage.setItem('looked',"[]");
            }*/
        }
    }



</script>

